<template>
  <el-dialog
    title="编辑header参数"
    :visible.sync="editHeaderDialogVisible"
    :close-on-click-modal="false"
    v-if="editHeaderDialogVisible"
    width="30%"
    :before-close="handleClose"
  >
    <div class="btn-area">
      <el-button type="primary" size="small" @click="addLine">添加行</el-button>
      <!-- <el-button type="danger" size="small">删除</el-button> -->
    </div>

    <div class="table-area">
      <el-table :data="tableData" border style="width: 100%" height="300">
        <el-table-column label="key">
          <template slot-scope="scope">
            <el-input
              style="height: 28px"
              v-model="scope.row.key"
              placeholder="key"
            ></el-input>
          </template>
        </el-table-column>

        <el-table-column label="value">
          <template slot-scope="scope">
            <el-input
              style="height: 28px"
              v-model="scope.row.value"
              placeholder="value"
            ></el-input>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="delClick(scope.row)"
              type="text"
              size="small"
              style="color: #f56c6c"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="footer">
      <el-button @click="cancel" size="small">取 消</el-button>
      <el-button type="primary" @click="ok" size="small">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      editHeaderDialogVisible: false,
      tableData: [
        {
          id: 0,
          key: "",
          value: "",
        },
      ],
    };
  },
  methods: {
    addLine() {
      const obj = { id: Date.now(), key: "", value: "" };
      this.tableData.push(obj);
    },
    handleClose() {
      this.editHeaderDialogVisible = false;
      this.tableData = [];
    },
    open(data) {
      if (!data) {
        this.tableData = [
          {
            id: 0,
            key: "",
            value: "",
          },
        ];
      }else{
        this.tableData=JSON.parse(data);
      }
      this.editHeaderDialogVisible = true;
    },
    delClick(row) {
      this.tableData = this.tableData.filter((item) => item.id != row.id);
      console.log(row.index);
    },
    cancel() {
      this.editHeaderDialogVisible = false;
      this.tableData = [];
    },
    ok() {
      let index = 1;
      let errorArry = [];
      this.tableData.forEach((item) => {
        if (item.key && item.value) {
          console.log("true");
        } else {
          errorArry.push(index);
        }
        index++;
      });
      if (errorArry.length > 0) {
        const message = `第 ${errorArry.join(",")} 行信息录入不全！`;
        this.$message.error(message);
      } else {
        const data = this.tableData.map((item) => {
          return { key: item.key, value: item.value };
        });
        this.$emit("saveHeader", data);
        this.editHeaderDialogVisible = false;
        this.tableData=[];
      }
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
::v-deep(.el-input__inner) {
  height: 28px;
}
.btn-area {
  margin-bottom: 15px;
  button {
    height: 30px;
  }
}

.footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;

  button {
    height: 30px;
  }
}
</style>
